<template>
	<view class="xqy">
		<!-- #ifdef H5 -->
		
		<Tou  class="toubu"></Tou>
		<!-- #endif -->
		<scroll-view scroll-y="true"  class="main" @scroll="scroll">
		<view class="nr">
			<view class="imgs">
				<image v-if="list.posters!==undefined" :src="'https://ss.lanqb.com/'+list.posters.banner" mode=""></image>
			</view>
			<view class="wenzi">
				<text class="txt1 zi">{{list.title}}</text>
				<view class="jiabin"v-if="list.cooperator!==undefined" >
					本期嘉宾: {{list.cooperator.nickname}}  |  直播时间: {{list.begin_at}}
				</view>
			</view>
			<view class="xuanze flex1" :class="{fiexd:fied==true}">
				<text v-for="(item,index) in list1" :class="{di:zhong==index}">{{item.text}}</text>
			
			</view>
			<view class="zhuti">
				<!-- 本期介绍 -->
					<view class="biaozhi">
						<view class="dian" >
						本期介绍
					</view>
					</view>
					<!-- 简介 -->
					<view class="jianjie">
						{{list.introduction}}
					</view>
					<!-- 视频 -->
					<view class="shipin">
					<image v-if="list.production!==undefined"  :src="list.production.cover_src
" mode=""></image>
					</view>
					<hr>
					<view class="user">
						<view class="zuozhe fl"  v-if="list.user!==undefined" >
									<image class="touxiang" :src="'https://ss.lanqb.com/'+list.user.avatar" mode=""></image>
							<text>{{list.user.nickname}}</text>
						</view>
						<p class="duanwen" v-if="list.teacher_info!==undefined">
							{{list.teacher_info.introduction}}
						</p>
						<h3 >本期大触</h3>
					
					</view>
					<!-- 大触作品 -->
					<view class="biaozhi">
						<view class="dian" >
						大触作品
					</view>
					</view>
					<view class="zuopin flex" >
						<image class="igs" :src="'https://ss.lanqb.com/'+item.cover_picture" mode="" v-for="(item,index) in list.daniu_class_teacher_works"></image>
					</view>
					<!-- 评论 -->
					<view class="biaozhi">
						<view class="dian" >
						评论
					</view>
					</view>
					<view class="pinlun">
					<textarea class="shuru" name="" id="" cols="30" rows="10"></textarea>
						<text>登录</text>后才能进行品论哦!
						<p>没有数据了</p>
					</view>
					
				</view>
			</view>

		<view class="dibu flex">
			<view class="left" v-if="list.production!==undefined">
				¥ {{list.production.origin_rmb_price}}
			</view>
			<view class="right fl">
				<view class="anniu">
					<text>联系老师</text>
					<p>领一次免费学习券</p>
				</view>
				<view class="anniu">
					<text>立刻报名</text>
					<p>({{list.periods}}人感兴趣)</p>
				</view>
			</view>
		</view>
		</scroll-view>

	</view>
</template>

<script>
	import Tou from "@/common/nav-tar.vue"
	import { apis } from "@/http/api.js"
	export default {
		data() {
			return {
				fied:false,
				list:[],
			/* 	{
					posters:{
						banner:''
					},
					cooperator:{nickname:''},
					production:{cover_src:''},
					user:{avatar:''},
					introduction:''
				}, */
				zhong:0,
				list1:[
					{
						id:0,text:"本期介绍"
					},
					{
						id:1,text:"大触周边"
					},
					
				]
			}
		},
		onLoad(optionns){
			
			apis.dachuxqy(optionns.ids).then((res)=>{
				
				this.list=res[1].data;
				console.log(this.list);
			})
		},
		
		methods: {
			scrolltoupper(){
				console.log(123);
			},
				scroll: function(e) {
							
							if (e.detail.scrollTop>=261) {
							this.fied=true
							}else{
								this.fied=false
							}
						
						},
		},
		components:{
			Tou,
		
		}
	}
</script>

<style lang="scss" scoped>
	.toubu{
		position: fixed;
		z-index: 99;
	}
	
	.imgs{
		width: 100%;
		height: 422rpx;
	
		box-sizing: border-box;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.wenzi{
		padding: 30rpx 30rpx 36rpx;
		background-color: #000;
		.zi{
			color: #fff;
			display: inline-block;
			width: 590rpx;
		
			box-sizing: border-box;
			font-size: 36rpx;
		}
		.jiabin{
			color: rgba(255, 255, 255, 0.6);
			font-size: 12rpx;
			
		}
	}
	.xuanze{
	width: 100%;
		height: 100rpx;
		background-color: #fff;
		
		text{
			display: inline-block;
			width: 50%;
			text-align: center;
			position: relative;
		}
		text:nth-child(1){
			border-right: 1px solid #bbb;
			
		}
		.di::before{
			position: absolute;
			content: "";
			display: inline-block;
			width: 70rpx;
			height: 4rpx;
			    background-color: #edce8c;
			top: 50rpx;
			left: 150rpx;
			
		}
		
		
	}
	.fiexd{
		z-index: 99;
		position: fixed;
		top: 160rpx;
	
	}
	.zhuti{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.jianjie{
		margin: 30rpx 0;
		font-size: 26rpx;
		color: #434343;
	}
	.shipin{
		width: 100%;
		height: 390rpx;
		border-radius: 12rpx;
		overflow: hidden;
		
			
		image{
			width: 100%;
			height: 100%;
		
		}
	}
	hr{
		color: #000;
		margin: 30rpx 0;
	}
	.user{
		position: relative;
		padding: 50rpx 40rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #0e1917;
		    background-image: linear-gradient(134deg,#242f32,#0e1917);
			.zuozhe{
				height: 232rpx;
				justify-content: center;
				align-items: center;
				color: #fff;
				.touxiang{
					margin-right: 20rpx;
					width: 168rpx;
					height: 168rpx;
					border-radius: 50%;
					
				}
			}
			.duanwen{
				border-top: 1px solid #f0f0f0;
				color: hsla(0,0%,100%,.6);
				margin: 40rpx 0 0;
				padding: 40rpx 0 0;
				font-size: 26rpx;
			}
			h3{
				position: absolute;
				top: 20rpx;
				left: 0rpx;
				width: 150rpx;
				height: 54rpx;
				line-height: 54rpx;
				text-align: center;
				font-size: 26rpx;
				color: #634b19;
				    background: url(https://assets-cdn.lanqb.com/imgv3/image/dc-tagbg_m@2x.png) no-repeat 50%;
				    background-size: cover;
			}
	}
	.zuopin{
	
		flex-wrap: wrap;
		.igs{
			width: 334rpx;
			height: 250rpx;
		
			margin: 0 0 20rpx;
			border-radius: 12rpx;
			
			
		}
	}
	.pinlun{
		    color: #a4a4a4;
			font-size: 28rpx;
		textarea{
			width: 100%;
			height: 128rpx;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #eee;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
		}
		text{
			    color: #ddb256;
		}
		p{
			font-size: 24rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	}
	
	.biaozhi{
			margin: 60rpx  0 30rpx;
			.dian{
					padding-left: 20rpx;
					position: relative;
					font-weight: 700;
			}
			.dian::before{
				content: ' ';
				position: absolute;
				top: 18rpx;
				left: 0rpx;
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				background-color: #edce8c;
			}
		}
		.main{
			position: relative;
			height: 87vh;
			padding-top: 170rpx;
			padding-bottom: 150rpx;
		
		}
		.dibu{
			width: 100%;
			position: fixed;
			background-color: #fff;
			z-index: 99;
			box-shadow: 0 0 24rpx 0 rgba(0, 0, 0, 0.08);
bottom: 0rpx;
		padding: 14rpx 30rpx;
		box-sizing: border-box;

		.anniu{
			width: 240rpx;
			height: 82rpx;
			border-radius: 45rpx;
		
			font-size: 12rpx;
			
			text-align: center;
			margin-right: 10rpx;
			padding-top: 10rpx;
				box-sizing: border-box;
		}
		.anniu:nth-child(1){
			background: #ff7879;
			color: #fff;
			
		}
		.anniu:nth-child(2){
			
			    color: #634b19;
			    background: #edce8c;
		}
		}
		
</style>
